import React from 'react';
import { SecondHeaderC, FirstHeaderC, ExportFrontEndC, TableC, PrimaryGhostC } from '../../comps';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Table, Tooltip } from 'antd';
import { exportExcel } from '../../utils/commonFunc';
class ExportFrontEndCDemo extends React.Component {
  constructor() {
    super();
    this.state = {
      dataSource1: [
        {
          id: '1',
          name: '张三',
          age: '18',
          gender: '男',
        },
        {
          id: '2',
          name: '李四',
          age: '21',
          gender: '女',
        },
        {
          id: '3',
          name: '王五',
          age: '26',
          gender: '男',
        },
      ],
      columns1: [
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '年龄',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: '性别',
          dataIndex: 'gender',
          key: 'gender',
        },
      ],
      columns2: [
        //嵌套表格
        { title: 'Name', key: 'name' },
        { title: '价格(保留4位）', key: 'platform', type: 'money', toFixed: '4' },
        { title: 'Version', key: 'version' },
        { title: '数值', key: 'upgradeNum', type: 'number' },
        { title: '比率', key: 'creator', type: 'rate' },
        { title: '价格（默认保留2位）', key: 'price', type: 'money' },
        { title: 'Date', key: 'createdAt' },
      ],
    };
  }
  render() {
    const columns2 = [
      { title: 'Name', key: 'name' },
      { title: '价格(保留4位）', key: 'platform', type: 'money', toFixed: '4' },
      { title: 'Version', key: 'version' },
      { title: '数值', key: 'upgradeNum', type: 'number' },
      { title: '比率', key: 'creator', type: 'rate' },
      { title: '价格（默认保留2位）', key: 'price', type: 'money' },
      { title: 'Date', key: 'createdAt' },
    ];
    const data2 = [];
    for (let i = 0; i < 100; ++i) {
      let children = [];
      for (let j = 0; j < 2; j++) {
        children.push({
          key: `${i}_${j}`,
          name: 'Screem' + i + j,
          platform: 0,
          version: '10.3.4.5654',
          upgradeNum: 5698.23452,
          creator: '0.121',
          price: '123.56895',
          createdAt: '2014-12-24 23:12:00',
        });
      }
      data2.push({
        key: i,
        name: 'Screem' + i,
        platform: 0,
        version: '10.3.4.5654',
        upgradeNum: 5698.23452,
        creator: '0.121',
        price: '123.56895',
        createdAt: '2014-12-24 23:12:00',
        children: children,
      });
    }
    // 合并单元格
    const renderContent = (value, row, index) => {
      const obj = {
        children: value,
        props: {},
      };
      if (index === 4) {
        obj.props.colSpan = 0;
      }
      return obj;
    };

    const columns3 = [
      {
        title: 'Name',
        dataIndex: 'name',
        render: (text, row, index) => {
          if (index < 4) {
            return text;
          }
          return {
            children: text,
            props: {
              colSpan: 6,
            },
          };
        },
      },
      {
        title: 'Age',
        dataIndex: 'age',
        type: 'number',
        render: renderContent,
      },
      {
        title: 'Home phone',
        colSpan: 2,
        dataIndex: 'tel',
        type: 'text',
        render: (value, row, index) => {
          const obj = {
            children: value,
            props: {},
          };
          if (index === 2) {
            obj.props.rowSpan = 2;
          }
          // These two are merged into above cell
          if (index === 3) {
            obj.props.rowSpan = 0;
          }
          if (index === 4) {
            obj.props.colSpan = 0;
          }
          return obj;
        },
      },
      {
        title: 'Phone',
        colSpan: 0,
        dataIndex: 'phone',
        render: renderContent,
      },
      {
        title: 'Address',
        dataIndex: 'address',
        render: renderContent,
      },
      {
        title: 'date',
        dataIndex: 'date',
        type: 'date',
        render: renderContent,
      },
    ];
    const data3 = [
      {
        key: '1',
        name: 'John Brown',
        age: 32,
        tel: '0571-22098909',
        phone: 18889898989,
        address: 'New York No. 1 Lake Park',
        date: '2022-01-31T16:00:00.000+0000',
      },
      {
        key: '2',
        name: 'Jim Green',
        tel: '0571-22098333',
        phone: '18889898888',
        age: 42,
        address: 'London No. 1 Lake Park',
        date: '2022-01-31T16:00:00.000+0000',
      },
      {
        key: '3',
        name: 'Joe Black',
        age: 32,
        tel: '0575-22098909',
        phone: 18900010002,
        address: 'Sidney No. 1 Lake Park',
        date: '2022-01-31T16:00:00.000+0000',
      },
      {
        key: '4',
        name: 'Jim Red',
        age: 18,
        tel: '0575-22098909',
        phone: '18900010002',
        address: 'London No. 2 Lake Park',
        date: '2022-02-21',
      },
      {
        key: '5',
        name: 'Jake White',
        age: 18,
        tel: '0575-22098909',
        phone: '18900010002',
        address: 'Dublin No. 2 Lake Park',
        date: '2022-01-31T16:00:00.000+0000',
      },
    ];
    // 单元格背景
    const columns4 = [
      { title: 'Name', key: 'name', ratio: 0.2 },
      { title: '价格', key: 'platform', type: 'money', ratio: 0.8 },
      {
        title: '涨跌幅',
        key: 'version',
        render: (text, record, index) => {
          if (record.version > 0) {
            return (
              <span>
                {text.toFixed(2)}{' '}
                <Tooltip title={text.toFixed(2)} overlayClassName={'tableTipStyle'}>
                  &nbsp;
                  <QuestionCircleOutlined style={{ color: '#4D86FF' }} />
                </Tooltip>
              </span>
            );
          } else {
            return text.toFixed(2);
          }
        },
      },
      {
        title: '数值',
        key: 'upgradeNum',
        type: 'number',
        colorType: 'colorType',
        width: 150,
        onCell: (record, rowIndex) => {
          let cellProps = {};
          if (record.upgradeNum < 1000) {
            cellProps.style = {
              background: 'green',
            };
          } else if (record.upgradeNum > 3000) {
            cellProps.style = {
              background: 'red',
            };
          }
          return cellProps;
        },
      },
      { title: '比率', key: 'creator', width: 150, type: 'rate' },
      { title: 'Date', key: 'createdAt', width: '20%' },
    ];
    const data4 = [];
    for (let i = 0; i < 5; ++i) {
      data4.push({
        key: i + 1,
        name: 'Screem' + (i + 1),
        platform: 12345788.12 * Math.random(),
        version: -3 + 5 * Math.random(),
        upgradeNum: 4000.55 * Math.random(),
        creator: 0.5689548 * Math.random(),
        createdAt: Math.random() > 0.3 ? '2014-12-24' : '',
      });
    }
    return (
      <div style={{ padding: '20px' }}>
        <FirstHeaderC title='前端自导出' />
        <div style={{ marginBottom: '20px' }}>
          <SecondHeaderC title='普通表格导出' />
          <ExportFrontEndC domId={['testTableId']} />
          <div id={'testTableId'}>
            <TableC
              columns={this.state.columns1}
              pagination={false}
              scroll={{ x: 'max-content' }}
              dataSource={this.state.dataSource1}
              rowKey={'id'}
              loading={this.props.loading}
              onChange={this.handleTableChange}
            />
          </div>
        </div>
        <div style={{ marginBottom: '20px' }}>
          <SecondHeaderC title='合并单元格' />
          <ExportFrontEndC
            domId={['id3']}
            columns={[columns3]}
            ColOption={[
              //第1,2,3,4,5，6 列的宽度
              { wpx: 100 },
              { wpx: 100 },
              { wpx: 150 },
              { wpx: 150 },
              { wpx: 150 },
              { wpx: 100 },
            ]}
          />
          <div id={'id3'}>
            <Table columns={columns3} dataSource={data3} bordered />
          </div>
        </div>
        <div style={{ marginBottom: '20px' }}>
          <SecondHeaderC title='单元格背景' />
          <ExportFrontEndC
            domId={['id4']}
            columns={[columns4]}
            ColOption={[
              //第1,2,3,4,5，6 列的宽度
              { wpx: 100 },
              { wpx: 100 },
              { wpx: 150 },
              { wpx: 150 },
              { wpx: 150 },
              { wpx: 100 },
            ]}
          />
          <div id={'id4'}>
            <TableC columns={columns4} dataSource={data4} hidePage={true} rowKey='key' />
          </div>
        </div>
        <SecondHeaderC title='禁用状态' />
        <div style={{ marginBottom: '10px' }}>
          <ExportFrontEndC disabled={true} />
        </div>
        <SecondHeaderC title='多表格导出' />
        <div style={{ marginBottom: '10px' }}>
          <ExportFrontEndC domId={['testTableId', 'id3', 'id4']} columns={[[], columns3, columns4]} />
        </div>
      </div>
    );
  }
}
export default ExportFrontEndCDemo;
